<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .price{
            color: red;
            font-size: 30px;
            font-style: italic;
        }
        .green{
            color: green;
        }
        .gold{
            color: gold;
        }
        .yellow{
            color: yellow;
        }*/
    </style>
</head>
<body>
    <div id="app">
        <!-- -->
        <h1>数据双向绑定</h1>
        <p>{{age}}</p>
        <p>{{name}}</p>
        <p>{{hasWude?'':'不'}}讲武德</p>
        <hr>
        <!-- 指令：写在标签上，当做标签属性，作用是操作标签-->
        <input type="text" v-model="text">
        <p>{{text}}</p>
        <hr>
        <p>以下是指令：</p>
        <!-- 显示文本-->
        <p v-text="name"></p>
        <!-- 显示带有html格式的文本-->
        <p v-html="text2"></p>
        <!-- 已登录-->
        <button v-if="isLogin">退出登录</button>
        <!-- 未登录 -->
        <button v-else>请登录</button>
        <br>
        <button v-show='isLogin'>退出登录</button>
        <button v-show='!isLogin'>请登录</button>
        <br>
        <button @click="isLogin = !isLogin">切换登陆状态</button>
        <!-- v-for遍历数组 item表示每一项，index是序号 -->
        <div v-for="(item,index) in gongFu">
            闪电五连鞭-第{{index+1}}招，名称：{{item.name}},价格￥
            <span class="price">{{item.price.toFixed(2)}}</span>元
        </div>
        <hr>
        <p>v-bind:绑定标签属性，语法糖形式：</p>
        <p :class="meiyan">赵美延</p>
        <p v-bind:class="minnie">金米妮</p>
        <p v-bind:class="xiaojuan">田小娟</p>
        <hr>
        <p>v-on:事件监听，语法糖形式@</p>
        <button v-on:click="say()">click</button>
    </div>
    <br>
    <br>
    <!--先引入-->
    <script src="./vue.js"></script>
    <script>
        //1.实例化
        let vm = new Vue({ //构造函数,首字母大写
            //2.添加选项参数
            //3.作用的元素
            el:'#app',
            //4.数据的初始化
            data:{
                age:18,
                name: 'xmm',
                hasWude:false,
                text: 'hello vue',
                text2:'<mark>hello vue</mark>',
                //判断是否登录的变量
                isLogin:false,
                gongFu:[
                    {name:'亢龙有悔',price:5},
                    {name:'飞龙在天',price:15}
                ],
                meiyan:'green',
                minnie:'gold',
                xiaojuan:'yellow'
            },
            //方法，函数
            methods:{
                say(){
                    console.log('马老师，发什么事了');
                    console.log('偷袭'+this.age+'岁的老同志，不讲武德');
                }
            }

        })
    </script>
</body>
</html>